<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{{info.1}}-日K</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
    {% include "common/cite-css.html" %}
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

    <!-- Navbar -->
    {% include "common/cite-navbar.html" %}
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    {% include "common/cite-sidebar-main.html" %}

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">{{info.1}}-日K</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">日K</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div id="e-chart" class="chart-container" style="width:100%; height:600px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- /.content-wrapper -->

    <!-- footer -->
    {% include "common/cite-foot.html" %}

    <!-- Control Sidebar -->
    {% include "common/cite-sidebar-ctrl.html" %}
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
</body>
{% include "common/cite-js.html" %}
<script src="/static/plugins/echarts/echarts.js"></script>
<script type = "text/javascript">

    $(function () {
        var data = {{data_list|safe}};
        var dates = {{date_list|safe}};
        var volumes = {{volumes|safe}};
        var info = {{info|safe}};

        var chart = echarts.init(document.getElementById('e-chart'), 'white', {renderer: 'canvas'});

        var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
        var labelFont = 'bold 12px Sans-serif';

        var dataMA5 = calculateMA(5, data);
        var dataMA10 = calculateMA(10, data);
        var dataMA20 = calculateMA(20, data);
        var dataMA60 = calculateMA(60, data);
        var dataMA120 = calculateMA(120, data);
        var dataMA240 = calculateMA(240, data);

        // 时间轴的开始结束时间，按百分比，默认显示四个月即120天，如果时间线小于120，则从零开始显示
        var dataZoomStart = dates.length<=120?0:(((dates.length-120)*100)/dates.length).toFixed(2);
        var dataZoomEnd = 100;

        var option = {
            animation: false,
            color: colorList,
            title: {
                left: 'center',
                text: info[1]+' K线图'
            },
            legend: {
                top: 30,
                data: ['日K', 'MA5', 'MA10', 'MA20', 'MA60', 'MA120', 'MA240']
            },
            tooltip: {
                triggerOn: 'none',
                transitionDuration: 0,
                confine: true,
                bordeRadius: 4,
                borderWidth: 1,
                borderColor: '#333',
                backgroundColor: 'rgba(255,255,255,0.9)',
                textStyle: {
                    fontSize: 12,
                    color: '#333'
                },
                position: function (pos, params, el, elRect, size) {
                    var obj = {
                        top: 60
                    };
                    obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                    return obj;
                }
            },
            axisPointer: {
                link: [{
                    xAxisIndex: [0, 1]
                }]
            },
            dataZoom: [{
                type: 'slider',
                xAxisIndex: [0, 1],
                realtime: false,
                start: dataZoomStart,
                end: dataZoomEnd,
                top: 65,
                height: 20
            }],
            xAxis: [{
                type: 'category',
                data: dates,
                boundaryGap : false,
                axisLine: { lineStyle: { color: '#777' } },
                axisLabel: {
                    formatter: function (value) {
                        return echarts.format.formatTime('MM-dd', value);
                    }
                },
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                    show: true
                }
            }, {
                type: 'category',
                gridIndex: 1,
                data: dates,
                scale: true,
                boundaryGap : false,
                splitLine: {show: false},
                axisLabel: {show: false},
                axisTick: {show: false},
                axisLine: { lineStyle: { color: '#777' } },
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                    type: 'shadow',
                    label: {show: false},
                    triggerTooltip: true,
                    handle: {
                        show: true,
                        margin: 30,
                        color: '#B80C00'
                    }
                }
            }],
            yAxis: [{
                scale: true,
                splitNumber: 2,
                axisLine: { lineStyle: { color: '#777' } },
                splitLine: { show: true },
                axisTick: { show: false },
                axisLabel: {
                    inside: true,
                    formatter: '{value}\n'
                }
            }, {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            }],
            grid: [{
                left: 20,
                right: 20,
                top: 110,
                height: 300
            }, {
                left: 20,
                right: 20,
                height: 40,
                top: 450
            }],
            graphic: [{
                type: 'group',
                left: 'center',
                top: 70,
                width: 300,
                bounding: 'raw',
                children: [{
                    id: 'MA5',
                    type: 'text',
                    style: {fill: colorList[1], font: labelFont},
                    left: 0
                }, {
                    id: 'MA10',
                    type: 'text',
                    style: {fill: colorList[2], font: labelFont},
                    left: 'center'
                }, {
                    id: 'MA20',
                    type: 'text',
                    style: {fill: colorList[3], font: labelFont},
                    right: 0
                }, {
                    id: 'MA60',
                    type: 'text',
                    style: {fill: colorList[4], font: labelFont},
                    right: 0
                }, {
                    id: 'MA120',
                    type: 'text',
                    style: {fill: colorList[5], font: labelFont},
                    right: 0
                }, {
                    id: 'MA240',
                    type: 'text',
                    style: {fill: colorList[6], font: labelFont},
                    right: 0
                }]
            }],
            series: [{
                name: 'Volume',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                    color: '#7fbe9e'
                },
                emphasis: {
                    itemStyle: {
                        color: '#140'
                    }
                },
                data: volumes
            }, {
                type: 'candlestick',
                name: '日K',
                data: data,
                itemStyle: {
                    color: '#ef232a',
                    color0: '#14b143',
                    borderColor: '#ef232a',
                    borderColor0: '#14b143'
                },
                emphasis: {
                    itemStyle: {
                        color: 'black',
                        color0: '#444',
                        borderColor: 'black',
                        borderColor0: '#444'
                    }
                }
            }, {
                name: 'MA5',
                type: 'line',
                data: dataMA5,
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    width: 1
                }
            }, {
                name: 'MA10',
                type: 'line',
                data: dataMA10,
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    width: 1
                }
            }, {
                name: 'MA20',
                type: 'line',
                data: dataMA20,
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    width: 1
                }
            }, {
                name: 'MA60',
                type: 'line',
                data: dataMA60,
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    width: 1
                }
            }, {
                name: 'MA120',
                type: 'line',
                data: dataMA120,
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    width: 1
                }
            }, {
                name: 'MA240',
                type: 'line',
                data: dataMA240,
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    width: 1
                }
            }]
        };

        chart.setOption(option);
    });

    function calculateMA(dayCount, data) {
        var result = [];
        for (var i = 0, len = data.length; i < len; i++) {
            if (i < dayCount) {
                result.push('-');
                continue;
            }
            var sum = 0;
            for (var j = 0; j < dayCount; j++) {
                sum += parseFloat(data[i - j][1]);
            }
            result.push((sum / dayCount).toFixed(2));
        }
        console.log(result);
        return result;
    }
</script>
</html>